<template>
  <div class="content">
    <el-form
      ref="form"
      :model="form"
      label-width="90px"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="操作时间段">
            <el-date-picker
              v-model="form.starttime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 170px;"
            ></el-date-picker>~
            <el-date-picker
              v-model="form.endtime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 170px;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          style="text-align: right;"
        >
          <el-button
            type="primary"
            style="width: 120px;"
            @click="query"
          >查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="two_el_row">
      <el-col :span="18">
        <div style="width:100px;height:2px"></div>
      </el-col>
      <el-col :span="6">
        <div
          class="lowerBrick fr"
          @click="lowerBrick"
        >
          <img
            src="../../../assets/img/lowerBrick.png"
            alt
            style="margin-right:6px"
          >
          <span>下钻</span>
        </div>
      </el-col>
    </el-row>
    <div class="table-box">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        class="onplay-table"
        v-loading="loading"
      >
        <el-table-column
          label="企业名称"
          align="center"
        >
          <template slot-scope="scope">
            <div
              class="item-name item-name-companyname"
              @click="showCompanyInfo(scope.row)"
            >{{scope.row.companyname}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="充值金额"
          align="center"
        >
          <template slot-scope="scope">
            <div class="item-cash">{{scope.row.totalfee}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rechargdate"
          label="充值时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="oppaccountname"
          label="银行账户"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="oppaccountno"
          label="银行账号"
          align="center"
        ></el-table-column>
        <el-table-column
          label="充值凭证"
          align="center"
        >
          <template slot-scope="scope">
            <div
              class="item-number"
              @click="LookInfo(scope.row)"
            >凭证</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="operationdate"
          label="操作时间"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="lookLog(scope.row)"
              type="text"
              size="small"
            >查看日志</el-button>
          </template>
        </el-table-column>
        </el-table-column>
      </el-table>
      <div
        style="padding:20px 0"
        v-if="tableData.length>0"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="ScheduleCurrentChange"
          :current-page="form.pagenum"
          :page-sizes="[10,20, 30, 50,100]"
          :page-size="form.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.total"
          background
        ></el-pagination>
      </div>

      <!-- <el-pagination @current-change="OnplayCurrentChange" :total="Onplay.total" :current-page="Onplay.pageNum" :page-size="Onplay.pageSize" layout="total, prev, pager, next, jumper" background>
      </el-pagination>-->

    </div>
    <el-dialog
      title="充值凭证"
      :visible.sync="dialogVisible"
      width="30%"
      custom-class="dialog_imgBox"
    >
      <img
        :src="'data:image/png;base64,'+imgbase64"
        alt
        width="100%"
        height="100%"
      >
    </el-dialog>
    <el-dialog
      :visible.sync="checkFlag"
      width="1040px"
      class="jhdialog"
    >
      <check
        v-show="checkFlag"
        :companyName="companyname"
        :companyId="companyid"
        :type="'0'"
        :tabNum="'4'"
      ></check>
    </el-dialog>

    <el-dialog
      :visible.sync="showLog"
      width="1024px"
      custom-class="showlog"
    >
      <showLog :reportid="reportId"></showLog>
    </el-dialog>

  </div>
</template>
<script>
import showLog from "../../backlog/showLog.vue";
import check from '../../socical/socialCheck/check.vue'
export default {
  components: {
    showLog,
    check
  },
  data () {
    return {
      tableData: [],
      loading: false,
      imgbase64: '',
      checkFlag: false,
      dialogVisible: false,
      companyname: "",
      companyid: "",
      form: {
        starttime: '',
        endtime: '',
        type: '',
        pagesize: 10,
        pagenum: 1,
        total: 0,
        userid: this.$route.params.userid || JSON.parse(localStorage.getItem('userinfo')).userid
      },
      showLog: false,
      reportId: "",
      dialogVisible: false,
      uploadForm: {
        accessoryid: '',
        updownmark: '1'
      },
    }
  },
  props: ['type'],
  created () {
    let department = JSON.parse(localStorage.getItem('userinfo')).department;
    if (department == "充值二部") {
      this.optShowTwo = true
    }
    this.getList();
  },
  methods: {
    getList (page) {
      this.form.type = this.type;
      if (this.form.starttime && this.form.endtime && Date.parse(this.form.starttime) > Date.parse(this.form.endtime)) {
        this.$message({
          message: "结束时间不能早于开始时间",
          type: "warning"
        });
        return;
      }
      this.$axios.post('/app/v1/platform/unusual/logList', this.form).then(resp => {
        if (resp.data.code == '1') {
          this.tableData = resp.data.data.list || [];
          this.form.total = Number(resp.data.data.totalnum);
          this.form.pagesize = Number(resp.data.data.pagesize);
          this.loading = false;

        }
      }).catch({})
    },
    //线下充值记录分页查询
    CurrentChange (val) {
      this.form.pagenum = val;
      this.getList();
    },
    //分页
    handleSizeChange (val) {
      this.form.pagenum = 1;
      this.form.pagesize = val;
      this.getList();

    },
    //分页查询
    ScheduleCurrentChange (val) {
      this.form.pagenum = val;
      this.getList();
    },
    closeWarnDialog () {
      this.reportContent = "";
    },
    lookLog (row) {
      this.reportId = row.reportid;
      this.showLog = true;
    },
    //查询
    query () {
      this.form.pagenum = 1;
      this.getList();
    },
    //下钻
    lowerBrick () {
      this.$router.push({
        name: 'lowerBrickList', //跳转的路径
        params: {
          type: this.type,
          userid: this.form.userid
        }
      })
    },
    LookInfo (row) {
      this.uploadForm.accessoryid = row.accessoryid
      this.$axios.post('/system/v1/common/upAndDown', this.uploadForm).then(res => {
        this.imgbase64 = res.data.data.filecontent;
      });
      this.dialogVisible = true;

    },
    showCompanyInfo (row) {
      this.companyid = row.companyid;
      this.companyname = row.companyname;
      this.checkFlag = true;
    },
  },


}
</script>
<style scoped>
.content {
  background: #fff;
  padding: 0 20px;
}
.el-row {
  padding-top: 20px;
}
.two_el_row {
  padding-top: 0px;
}
.lowerBrick {
  color: #0064e4;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #0064e4;
  padding: 0 26px;
  cursor: pointer;
  margin-bottom: 10px;
}
.table-box {
  padding-bottom: 20px;
}
.item-number {
  color: #0064e4;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: underline;
}
.item-name-companyname {
  cursor: pointer;
}
.item-name {
  color: #0064e4;
}
</style>



